<template>
    <div class="grid grid-cols-2 gap-5 p-5">
        <div v-for="(item, index) in treeList" :key="index" 
             class="bg-white rounded-lg shadow-md">
            <div class="flex p-3">
                <!-- 左侧总数 -->
                <div @click="active = index" class="w-[120px] flex flex-col items-center justify-center border-r border-gray-100 pr-5">
                    <div class="text-3xl font-bold text-blue-500">{{ item.count }}</div>
                    <div class="mt-2 text-gray-600">{{ item.name }}</div>
                </div>
                <!-- 右侧列表 -->
                <div class="flex-1 pl-5 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
                    <!-- <div v-for="(child, childIndex) in item.children" 
                         :key="childIndex" 
                         class="bg-gray-50 px-3 py-1 rounded mb-1 h-6 flex items-center justify-between last:mb-0">
                        <span class="text-gray-600 text-sm">{{ child.name }}</span>
                        <span class="text-blue-500 font-medium text-sm">{{ child.count }}</span>
                    </div> -->

                    <div v-if="active !== 4">
                        <Compnoent1 />
                    </div>
                    <div v-else>
                        <Compnoent2 />
                    </div>
                </div>
            </div>
        </div>


        <div class="flex justify-between">
            <div class="total w-135px h-85px ml-12px flex items-center justify-center">
                <img src="" class="w-48px h-55px" alt="">
                <span>{{ item.count }}</span>
            </div>
            <div class="flex flex-col gap-2 mr-43px max-h-85px overflew-y-auto">
                <div v-for="child in item.children" class="child flex justify-between items-center whitespace-nowrap">
                    <span>{{ child.name }}</span>
                    <span>{{ child.count }}个</span>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script setup lang='ts'>
import { onMounted, ref } from 'vue'
const active = ref(1)

const treeList = ref([
    {
        name: '救援车辆', count: 77, children: [
            {name: '工程抢险类', count:12}
        ]
    },
    {
        name: '救援专家', count: 77, children: [
            {name:"港口危货运输",count: 12},
            {name:"港口危货运输",count: 12},
            {name:"港口危货运输",count: 12},
            {name:"港口危货运输",count: 12},
            {name:"港口危货运输",count: 12},
        ]
    },
    {
        name: '救援队伍', count: 77, children: [
            { name: '国家消防救援队', count: 12},
            { name: '国家消防救援队', count: 12},
            { name: '国家消防救援队', count: 12}
        ]
    },
    {
        name: '物资仓库', count: 77, children: [
            {name: '防护器具', count: 12},
            {name: '消防器材', count: 12},
        ]
    }
])

const getlist = async () => {
    try {
        // 救援车辆数据
        const { err1, res1 } = await apiFun1()
        if (!err1 && res1) {
            treeList.value[0].children = res1.map((item: any) => ({
                name: item.name,
                count: item.count
            }))
            treeList.value[0].count = treeList.value[0].children.reduce((sum, item) => sum + item.count, 0)
        }

        // 救援专家数据
        const { err2, res2 } = await apiFun2()
        if (!err2 && res2) {
            treeList.value[1].children = res2.map((item: any) => ({
                name: item.name,
                count: item.count
            }))
            treeList.value[1].count = treeList.value[1].children.reduce((sum, item) => sum + item.count, 0)
        }

        // 救援队伍数据
        const { err3, res3 } = await apiFun3()
        if (!err3 && res3) {
            treeList.value[2].children = res3.map((item: any) => ({
                name: item.name,
                count: item.count
            }))
            treeList.value[2].count = treeList.value[2].children.reduce((sum, item) => sum + item.count, 0)
        }

        // 物资仓库数据
        const { err4, res4 } = await apiFun4()
        if (!err4 && res4) {
            treeList.value[3].children = res4.map((item: any) => ({
                name: item.name,
                count: item.count
            }))
            treeList.value[3].count = treeList.value[3].children.reduce((sum, item) => sum + item.count, 0)
        }
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}

onMounted(() => {
    getlist()
})
</script>
    
<style scoped>
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

.grid-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    height: 85px;
}

.box {
    display: flex;
    padding: 12px;
    height: 100%;
}

.total-count {
    width: 120px;
    height: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.count-number {
    font-size: 32px;
    font-weight: bold;
    color: #409EFF;
}

.count-label {
    margin-top: 8px;
    color: #606266;
}

.children-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 20px;
    height: 85px;
    overflow-y: auto;
}

.children-list.three-rows {
    height: 85px;
}

.children-list::-webkit-scrollbar {
    width: 6px;
}

.children-list::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 3px;
}

.children-list::-webkit-scrollbar-track {
    background-color: #f5f7fa;
}

.child-item {
    background: #f5f7fa;
    padding: 4px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    height: 24px;
}

.child-item:last-child {
    margin-bottom: 0;
}

.child-name {
    color: #606266;
    font-size: 14px;
}

.child-count {
    color: #409EFF;
    font-weight: 500;
    font-size: 14px;
}
</style>